<template>
  <div class="user-view">
    <spinner :show="loading"></spinner>
    <template v-if="bid">
      <h1>标的 : {{ bid.responseMessage }}</h1>
      <ul class="meta">
        <li><span class="label">ID:</span> {{ bid.bidDetail && bid.bidDetail.bidId }}</li>
        <li><span class="label">bidTitle:</span> {{ bid.bidDetail && bid.bidDetail.bidTitle }}</li>
        <li v-if="bid.about" v-html="bid.about" class="about"></li>
      </ul>
      <button v-on:click="greet">更改标的</button>
    </template>
  </div>
</template>

<script>
import Spinner from '../components/Spinner.vue'

function fetchData (store) {
  return store.dispatch('FETCH_BID', {
    bidId: '5834'
  })
}

export default {
  name: 'user-view',
  components: { Spinner },
  data(){
    const data={
      loading: false
    }
    return data
  },
  computed: {
    bid () {
      return this.$store.state.bid
    }
  },
  preFetch: fetchData,
  beforeMount () {
    fetchData(this.$store)
  },
  methods: {
    greet: function () {
      this.loading = true;
      this.$store.dispatch('FETCH_BID', {
        bidId: '4528'
      }).then(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="stylus">
.user-view
  background-color #fff
  box-sizing border-box
  padding 2em 3em
  h1
    margin 0
    font-size 1.5em
  .meta
    list-style-type none
    padding 0
  .label
    display inline-block
    min-width 4em
  .about
    margin 1em 0
  .links a
    text-decoration underline
</style>
